<template>
  <div class="list" ref="listWrapper">
    <div>
      <div class="hot-cities">
        <div class="hot-cts-title" ref="hotCity">热门城市</div>
        <ul class="clearfix">
          <li>北京</li>
          <li class="border-left">北京</li>
          <li class="border-left">北京</li>
          <li class="border-top">北京</li>
          <li class="border-topleft">北京</li>
          <li class="border-topleft">北京</li>
          <li class="border-top">北京</li>
          <li class="border-topleft">北京</li>
          <li class="border-topleft">北京</li>
          <li class="border-top">北京</li>
          <li class="border-topleft">北京</li>
          <li class="border-topleft">北京</li>
        </ul>
      </div>
      <div class="alphabet-menu">
        <div class="alphabet-menu-title">字母排序</div>
        <ul class="clearfix">
          <li>A</li>
          <li>A</li>
          <li>A</li>
          <li>A</li>
          <li>A</li>
          <li>A</li>
          <li>A</li>
          <li>A</li>
          <li>A</li>
          <li>A</li>
          <li>A</li>
          <li>A</li>
          <li>A</li>
          <li>A</li>
          <li>A</li>
          <li>A</li>
          <li>A</li>
          <li>A</li>
          <li>A</li>
          <li>A</li>
          <li>A</li>
          <li>A</li>
          <li>A</li>
          <li>A</li>
          <li>A</li>
        </ul>
      </div>
      <div class="alphabet-list">
        <div class="alphabet-list-title">
          A
          <ul class="clearfix">
            <li>阿拉尔</li>
            <li>阿拉尔</li>
            <li>阿拉尔</li>
            <li>阿拉尔</li>
            <li>阿拉尔</li>
            <li>阿拉尔</li>
            <li>阿拉尔</li>
            <li>阿拉尔</li>
            <li>阿拉尔</li>
            <li>阿拉尔</li>
            <li>阿拉尔</li>
            <li>阿拉尔</li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
var Mock = require("mockjs");
import BScroll from "better-scroll";
export default {
  name: "CityList",
  data: function () {
    return {};
  },
  mounted: function () {
    //refs 可以操作DOM节点
    // console.log(this.$refs);
    //{hotCity: div.hot-cts-title, listWrapper: div.hot-cities}

    this.scroll = new BScroll(this.$refs.listWrapper);
  },
};
</script>

<style lang="stylus" scoped>
@import '~styles/variables.styl';

div {
  box-sizing: border-box;
}

.clearfix::after {
  display: block;
  content: '';
  clear: both;
}

.list {
  position: absolute;
  top: 0.88rem;
  left: 0;
  right: 0;
  botton: 0;
  overflow: hidden;
}

.hot-cities {
  width: 100%;
  height: 4.32rem;
}

.hot-cities .hot-cts-title, .alphabet-menu .alphabet-menu-title, .alphabet-list .alphabet-list-title {
  width: 100%;
  height: 0.72rem;
  line-height: 0.72rem;
  padding: 0 0.2rem;
  background-color: #eee;
}

.hot-cities ul li {
  float: left;
  width: 33.33%;
  height: 0.9rem;
  line-height: 0.9rem;
  text-align: center;
}

.alphabet-menu ul {
  height: 4.2rem;
  margin: 0.3rem 0;
}

.alphabet-menu ul li {
  float: left;
  width: 16.67%;
  height: 0.9rem;
  line-height: 0.9rem;
  text-align: center;
}

.alphabet-list ul li {
  float: left;
  width: 25%;
  height: 0.9rem;
  line-height: 0.9rem;
  text-align: center;
}
</style>
